<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>jpaegs示例</title>
<link type="text/css" rel="stylesheet" href="dest/css/jPages.css" />
<style>
ul{
list-style:none;
}
ul li span{
padding: 5px 20px;
    width: 50px;
    display: inline-block;
}
ul li span.title{
font-weight:600;
}
.holder{
    height: 26px;
    margin: 20px auto;
	width:auto;
	padding-left:213px;
}
div a.home{
color: #11b006;
}
</style>
</head>
<body>
<div style="text-align:center;padding:20px 0;">jPages示例：前端查询</div>
<div style="text-align:center;">
<ul>
<li><span class="title">姓名</span><span class="title">年龄</span><span class="title">身高</span><span class="title">性别</span></li>
</ul>
<ul id="pages">

<li style="display:none;"><span class="content1">小三</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">小二</span><span class="content">11</span><span class="content">122</span><span class="content">女</span></li>
<li><span class="content1">王一</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">王二</span><span class="content">11</span><span class="content">131</span><span class="content">女</span></li>
<li><span class="content1">网三</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">张五</span><span class="content">11</span><span class="content">151</span><span class="content">男</span></li>
<li><span class="content1">tt</span><span class="content">11</span><span class="content">111</span><span class="content">女</span></li>
<li><span class="content1">yy</span><span class="content">11</span><span class="content">112</span><span class="content">女</span></li>
<li><span class="content1">yy1</span><span class="content">11</span><span class="content">121</span><span class="content">女</span></li>
<li><span class="content1">tstss</span><span class="content">11</span><span class="content">333</span><span class="content">男</span></li>
<li><span class="content1">dddd</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">bbb</span><span class="content">11</span><span class="content">2222</span><span class="content">男</span></li>
<li><span class="content1">tstsds</span><span class="content">11</span><span class="content">333</span><span class="content">女</span></li>
<li><span class="content1">ddbdd</span><span class="content">11</span><span class="content">111</span><span class="content">女</span></li>
<li><span class="content1">bddbb</span><span class="content">11</span><span class="content">2222</span><span class="content">女</span></li>
<li><span class="content1">小三</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">小二</span><span class="content">11</span><span class="content">122</span><span class="content">女</span></li>
<li><span class="content1">王一</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">王二</span><span class="content">11</span><span class="content">131</span><span class="content">女</span></li>
<li><span class="content1">网三</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">张五</span><span class="content">11</span><span class="content">151</span><span class="content">男</span></li>
<li><span class="content1">tt</span><span class="content">11</span><span class="content">111</span><span class="content">女</span></li>
<li><span class="content1">yy</span><span class="content">11</span><span class="content">112</span><span class="content">女</span></li>
<li><span class="content1">yy1</span><span class="content">11</span><span class="content">121</span><span class="content">女</span></li>
<li><span class="content1">tstss</span><span class="content">11</span><span class="content">333</span><span class="content">男</span></li>
<li><span class="content1">dddd</span><span class="content">11</span><span class="content">111</span><span class="content">男</span></li>
<li><span class="content1">bbb</span><span class="content">11</span><span class="content">2222</span><span class="content">男</span></li>
<li><span class="content1">tstsds</span><span class="content">11</span><span class="content">333</span><span class="content">女</span></li>
<li><span class="content1">ddbdd</span><span class="content">11</span><span class="content">111</span><span class="content">女</span></li>
<li><span class="content1">bddbb</span><span class="content">11</span><span class="content">2222</span><span class="content">女</span></li>

</ul>
<div class="holder"></div>
<div>
</div>

<div style="text-align:center;padding:20px 0;"> <a class="home" target="_blank" href="http://www.weile.space">欢迎访问我的个人主页</a></div>

<script type="text/javascript" src="dest/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dest/js/jPages.js"></script>
<script type="text/javascript">
$(function(){
$("div.holder").jPages({
					containerID : "pages",
					previous : "",
					next : "",
					perPage : 5,
					delay : 0,
					midRange : 3,
					search : true,
					searchTag :"span.content1",
					ParentTag :"li"
				});
});
</script>
</body>
</html>